import React, { useState, useEffect } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Form, Input, Button, Modal, Select, Row, Col } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data'
import { getRuleQueryList } from './service'

export default () => {
    const { Option } = Select;
    // 模态框控制
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 添加用户数据表单验证 获取表单
    const addFormRef: any = React.createRef();

    // 新增
    const addInfo = () => {
        setIsModalVisible(true);
    }

    // 新增确认
    const handleAddOk = () => {
        // 获取新增表单的值
        var reponse = addFormRef.current?.getFieldsValue()
        console.log(reponse);
        // 表单验证
        addFormRef.current.validateFields().then(() => {
            // 重置表单
            addFormRef.current.resetFields();
            // 关闭模态框
            setIsModalVisible(false)
        }).catch(() => { })
    }

    // 表头数据
    const columns: ProColumns<columnsDataType>[] = columnsData

    // 操作行数据 自定义操作行
    const actionRender: any = (text: any, record: any, index: number) =>
        [<a key={record.id}>生效</a>]

    // 金额行数据 自定义靠右
    const moneyRender: any = (text: any, record: any, index: number) =>
        [<p key={record.id} style={{ textAlign: 'right', margin: 0 }}>{text}</p>]

    // 自定义数据的表格头部数据
    columns.forEach((item: any) => {
        item.dataIndex === 'action' ? item.render = actionRender : undefined
        item.dataIndex === 'chargeAmount' || item.dataIndex === 'maxChargeAmount' || item.dataIndex === 'rate' ? item.render = moneyRender : undefined
    });

    return (
        <div>
            {/* Pro表格 */}
            <ProTable<columnsDataType>
                headerTitle={<div style={{ display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 6, height: 20, backgroundColor: 'skyblue', marginRight: 6 }}></div>
                    <span>积分规则查询</span>
                </div>}
                bordered
                // 表头
                columns={columns}
                // 请求获取的数据
                request={
                    async (params = {}) => {
                        return getRuleQueryList(params).then(res => {
                            return res
                        })
                    }
                }
                rowKey="id"
                // 本地存储表格列的显示数据
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                }}
                // 搜索框配置
                search={{
                    labelWidth: 'auto',
                }}
                // 搜索表单的配置
                form={{
                    ignoreRules: false,
                }}
                pagination={{
                    pageSize: 5,
                }}
                dateFormatter="string"
                //设置工具栏按钮及事件
                toolBarRender={() => [
                    <Button key="button" icon={<PlusOutlined />} type="primary" onClick={addInfo}>
                        新增
                    </Button>,
                ]}
            />
            {/* 新增模态框 */}
            <Modal
                title="积分规则配置"
                centered
                visible={isModalVisible}
                onOk={handleAddOk}
                onCancel={() => setIsModalVisible(false)}
                width={700}>
                <Form
                    name="basic"
                    ref={addFormRef}
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                    autoComplete="off"
                    initialValues={{ state: 'effect' }}
                >
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="行为编号"
                                name="behaviorNumber"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="行为名称"
                                name="behaviorName"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="生效时间"
                                name="effectiveDate"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="激励分数"
                                name="incentiveScore"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="状态"
                                name="state"
                            >
                                <Select style={{ width: 120 }} disabled>
                                    <Option value="effect">生效</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </div>
    );
};